<template>
	<view class="content">
		<view class="order-top uni-row">
			<view class="tab-item" v-for="(item,index) in tab" :key="index" @tap="changetab(index)" :class="{'tab-active':index==tab_index}">
				{{item}}
			</view>
		</view>
		<view style="height: 85rpx;"></view>
		<view class="goodlist" v-show="tab_index==0" >
			<image src="../../static/images/noshuju.png" class="no-data" v-if="noshuju1"></image>
			<view class="good-item" @tap="goodsinfo" v-for="(item,index) in shoucanglist" :key="index" :data-id="item.id">
				<view class="good-img">
					<image :src="item.filepath"></image>
				</view>
				
				<view class="goods-title">
					{{item.name}}
				</view>
				<view v-if="role=='p'" style="color: #999999;padding: 0rpx 20rpx;margin-bottom: 10rpx;margin-top: -15rpx;"><text style="font-size: 18rpx;">￥</text><text style="font-size: 24rpx;text-decoration: line-through;">{{item.price}}</text></view>
				<view v-if="role=='s'" style="color: #999999;padding: 0rpx 20rpx;margin-bottom: 10rpx;margin-top: -15rpx;"><text style="font-size: 18rpx;">零售￥</text><text style="font-size: 24rpx;text-decoration: line-through;">{{item.user_price}}</text></view>
				<view class="goods-price" v-if="role=='p'">
					<text style="font-size: 20rpx;">￥</text>{{item.user_price}}
				</view>
				<view class="goods-price" v-if="role=='s'">
					<text style="font-size: 20rpx;">￥</text>{{item.merchant_price}}
				</view>
				<image v-if="item.collect==1" src="../../static/images/shoucang-active.png" class="shoucang" @tap.stop="shoucang" :data-id="item.id" :data-index="index" ></image>
				<image v-if="item.collect==0" src="../../static/images/shoucang.png" class="shoucang" @tap.stop="shoucang" :data-id="item.id" :data-index="index" ></image>
			</view>
		</view>
		<view class="bar-list"  v-show="tab_index==1" >
			<image src="../../static/images/noshuju.png" class="no-data" v-show="noshuju2"></image>
			<view class="bar-item uni-row border-bottom" style="position: relative;" v-for="(item,index) in bar_list" :key="index" :data-id="item.id"  @tap="barinfo">
				<view class="bar-icon">
					<image :src="item.filepath"></image>
				</view>
				<view class="bar-info">
					<view class="bar-name">{{item.name}}</view>
					<view class="bar-jianjie">
						{{item.signature}}
					</view>
				</view>
				<image src="../../static/images/shoucang-active.png" style="width: 42rpx;height: 42rpx;position: absolute;top: 32rpx;right: 32rpx;" @tap.stop="cang_bar" :data-id="item.id" :data-index="index"></image>
			</view>
			
		</view>
		<view  class="news-container"  v-show="tab_index==2">
			<image src="../../static/images/noshuju.png" class="no-data" v-show="noshuju3"></image>
			<view class="news-item"  @tap="gonewsinfo" v-for="(item,index) in articles" :key="index" :data-id="item.id" > 
				<view class="news-img">
					<!-- <image src="../../static/images/shipin-icon.png" class="shipin-icon"></image> -->
					<image :src="item.filepath" class="news-images" ></image>
				</view>
				<view class="news-title" style="position: relative;padding-right: 50rpx;box-sizing: border-box;">
					
				   {{item.title}}
				<image src="../../static/images/shoucang-active.png" style="width: 42rpx;height: 42rpx;position: absolute;top: 0px;right: 0px;" @tap.stop="cang_art" :data-id="item.id" :data-index="index"></image>
				</view>
				<view class="news-resourse clear">
					<text class="left">{{item.source}}</text>
					<text class="right">{{item.read_nums}}阅读</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import httpPath from '@/static/js/path.js';
	import {getlogin} from "@/static/js/login.js";
	import {isshangjia} from "@/static/js/login.js";
	var page=1;
	import MescrollUni from "@/components/uni-load-more.vue";
	
	export default {
		data() {
			return {
				tab:["商品","酒吧","嗨啤说"],
				tab_index:0,
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				role:"",
				shoucanglist:[],
				bar_list:[],
				articles:[],
				noshuju1:false,
				noshuju2:false,
				noshuju3:false,
			}
		},
		onPullDownRefresh() {
			page=1
			this.loadingType=0;
		    this.getdata();   
		    setTimeout(function () {
		            uni.stopPullDownRefresh();
		    }, 1000);
		},
		onReachBottom: function() {
			if (this.loadingType != 0) {//loadingType!=0;直接返回
				return false;
			}
			this.loadingType = 1;
			uni.showNavigationBarLoading();//显示加载动画
			page++;//每触底一次 page +1
			let url="";
			if(this.tab_index==0){
				url="/index/spucollect/index"
			}else if(this.tab_index==1){
				url="/index/shopcollect/index"
			}else if(this.tab_index==2){
				url="/index/articlecollect/index"
			}
			uni.request({
				url: httpPath.filePath+url,
				method:'POST',
				header:{'content-type':'application/x-www-form-urlencoded'},
				data: {page:page,wxinfo_id:this.wxinfo_id},
				success: (res) => {
					if (res.data.data.length==0) {//没有数据
						this.loadingType = 2;
						uni.hideNavigationBarLoading();//关闭加载动画
						return false;
					}
					if(this.tab_index==0){
						for (let i = 0;i < res.data.data.length;i++) {
							this.shoucanglist.push(res.data.data[i]);	
						}
						
					}else if(this.tab_index==1){
						for (let i = 0;i < res.data.data.length;i++) {
							this.bar_list.push(res.data.data[i]);	
						}
					}else if(this.tab_index==2){
						for (let i = 0;i < res.data.data.length;i++) {
							this.articles.push(res.data.data[i]);	
						}
					}
					
					this.loadingType = 0;//将loadingType归0重置
					uni.hideNavigationBarLoading();//关闭加载动画	
				}
			});
		},
		onShow(){
			this.loadingType=0;
			page= 1;
			let ss = uni.getStorageSync('user');
			if(ss){
				this.wxinfo_id=ss.wxinfo_id;
			}else{
				this.wxinfo_id=0;
			}
			this.getdata();
			this.role=isshangjia();
		},
		onLoad() {
			this.loadingType=0;
			page= 1;
			let ss = uni.getStorageSync('user');
			if(ss){
				this.wxinfo_id=ss.wxinfo_id;
			}else{
				this.wxinfo_id=0;
			}
			this.getdata();
			this.role=isshangjia();
		},
		methods: {
			gonewsinfo(e){
				uni.navigateTo({
					url: '/pages/index/newsinfo?id=' + e.currentTarget.dataset.id
				});
			},
			/**
			 * @param {Object} e商品详情
			 */
			goodsinfo(e){
				uni.navigateTo({
					url: '/pages/shopping/goodsinfo?id=' + e.currentTarget.dataset.id
				});
			},
			/**
			 *去往详情页面
			 */
			barinfo(e) {
				uni.navigateTo({
					url: '/pages/shopping/barinfo?id=' + e.currentTarget.dataset.id
				});
			},
			/**
			 * 收藏商品
			 */
			shoucang(e){
				let id = e.currentTarget.dataset.id;
				let index = e.currentTarget.dataset.index;
				let userinfo= getlogin();
				if(userinfo){
					uni.request({
						url: httpPath.filePath+'/index/spucollect/publish',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {wxinfo_id:this.wxinfo_id,id:id},
						success: (res) => {
							if(res.data.code==201){
								this.shoucanglist.splice(index,1)
								// this.shoucanglist[index].collect=1;
							}
						}
					});
				}
			},/**
			 * 收藏文章
			 */
			cang_art(e){
				let id = e.currentTarget.dataset.id;
				let index = e.currentTarget.dataset.index;
				let userinfo= getlogin();
				if(userinfo){
					uni.request({
						url: httpPath.filePath+'/index/articlecollect/publish',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {wxinfo_id:this.wxinfo_id,id:id},
						success: (res) => {
							if(res.data.code==201){
								this.articles.splice(index,1)
								// this.shoucanglist[index].collect=1;
							}
						}
					});
				}
			},/**
			 * 收藏店铺
			 */
			cang_bar(e){
				let id = e.currentTarget.dataset.id;
				let index = e.currentTarget.dataset.index;
				let userinfo= getlogin();
				if(userinfo){
					uni.request({
						url: httpPath.filePath+'/index/shopcollect/publish',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {wxinfo_id:this.wxinfo_id,id:id},
						success: (res) => {
							if(res.data.code==201){
								this.bar_list.splice(index,1)
								// this.shoucanglist[index].collect=1;
							}
						}
					});
				}
			},
			changetab(index){
				
				this.loadingType=0;
				page= 1;
				this.tab_index=index;
				this.getdata();
			},getdata(){
				let url="";
				if(this.tab_index==0){
					url="/index/spucollect/index"
				}else if(this.tab_index==1){
					url="/index/shopcollect/index"
				}else if(this.tab_index==2){
					url="/index/articlecollect/index"
				}
				uni.request({
					url: httpPath.filePath+url,
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {page:page,wxinfo_id:this.wxinfo_id},
					success: (res) => {
						if(res.data.code==200){
							if(this.tab_index==0){
								this.shoucanglist = res.data.data;
								if(this.shoucanglist.length==0){
									this.noshuju1=true;
								}else{
									this.noshuju1=false;
								}
							}else if(this.tab_index==1){
								this.bar_list=res.data.data;
								if(this.bar_list.length==0){
									this.noshuju2=true;
								}else{
									this.noshuju2=false;
								}
							}else if(this.tab_index==2){
								this.articles=res.data.data;
								if(this.articles.length==0){
									this.noshuju3=true;
								}else{
									this.noshuju3=false;
								}
							}
						}
						
					}
				});
			}
		}
	}
</script>

<style>
	
	.goodlist{margin-top: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	.order-top{width: 100%;background: #333333;height:85rpx;position: fixed;top: 0px;left: 0px;z-index: 10000;}
	.tab-item{width: 33.3%;position: relative;font-size: 30rpx;color: #666666;text-align: center;height:85rpx;line-height: 85rpx;}
	.tab-active{color: #FFFFFF;font-weight: bold;}
	.tab-active::after{content: "";display: block;width: 98rpx;height: 2px;position: absolute;bottom: 0rpx;left: 77rpx;background: #7ADBA8;}
    /* 文章 */
	
	.clear::after{content: "";
	display: block;clear: both;}
	.left{float: left;}
	.right{float: right;}
	.news-resourse{color:#999999;font-size: 22rpx;margin-top: 10rpx;padding-bottom: 20rpx;border-bottom: 1px solid #F2F2F2;}
	.news-container{width: 100%;box-sizing: border-box;padding: 32rpx;}
	.news-img{width: 686rpx;border-radius: 10rpx;overflow: hidden;
	position: relative;
	}
	.news-img {border-radius: 10rpx;}
	.news-img .shipin-icon{width:107rpx ;height: 107rpx;position:absolute;top:calc( 50% - 53rpx);left:calc( 50% - 53rpx);z-index: 10;}
	.news-img .news-images{width:100%;height:330rpx;border-radius: 10rpx;}
	/* .news-img video{width:100%;height:330rpx;border-radius: 10rpx;} */
	.news-item{margin-bottom: 20rpx;}
	.news-title{width: 100%;overflow: hidden;text-overflow: ellipsis;
	white-space: nowrap;
	font-size:32rpx;
	font-family:PingFang SC;
	font-weight:bold;
	color:rgba(51,51,51,1);
	line-height:43rpx;}
	/* 商品 */
	
	.good-item{width: 375rpx;border-radius: 5px;position: relative;padding-bottom: 15rpx;float: left;margin-bottom: 30rpx;}
	.good-img{width:375rpx;height: 375rpx;overflow: hidden;}
	.good-img image{width: 100%;height: 100%;}
	.goods-title{
		margin-bottom: 30rpx;
		padding: 0rpx 10rpx 0px 30rpx;
		height: 75rpx;font-size: 28rpx;color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical; 
		-webkit-line-clamp: 2; 
		line-height: 38rpx;
	}
	.goods-price{font-size: 32rpx;font-weight: bold;padding: 0px 20rpx;}
	.shoucang{width: 41.2rpx;height: 37rpx;position: absolute;bottom:15rpx ;right:15rpx ;}
	/* 酒吧
	 */
	.bar-list{width: 686rpx;margin: auto;}
	.bar-item{padding: 36rpx 0px;}
	.bar-icon {width:195rpx ;height:195rpx ;border-radius: 5px;}
	.bar-icon image{width: 100%;height: 100%;border-radius: 5px;}
	.bar-info{width: 451rpx;margin-left: 37rpx;}
	.bar-name{font-size: 32rpx;font-weight: bold;margin-bottom: 18rpx;}
	.bar-jianjie{font-size: 24rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal!important;
	display: -webkit-box;
	-webkit-box-orient: vertical; 
	-webkit-line-clamp: 3; 
	line-height: 46rpx;
	height: 138rpx;
	text-indent: 2em;
	}
</style>
